<!DOCTYPE html>
<html>
<head>
    <title>{% if form.instance.pk %}编辑成绩{% else %}添加成绩{% endif %} - 学生成绩管理系统</title>
    <link rel="stylesheet" href="/static/css/home.css">
    <link rel="stylesheet" href="/static/css/forms.css">
    <link rel="stylesheet" href="/static/css/scores.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <nav class="top-nav">
        <div class="nav-content">
            <a href="/" class="logo">学生成绩管理系统</a>
            <div class="user-info">
                <span class="welcome-text">欢迎，{{ request.user.username }}</span>
                <a href="{% url 'accounts:logout' %}" class="logout-btn">退出登录</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <main class="main-content">
            <h1 class="page-title">
                {% if form.instance.pk %}
                    <i class="fas fa-edit"></i> 编辑成绩
                {% else %}
                    <i class="fas fa-plus-circle"></i> 添加成绩
                {% endif %}
            </h1>

            <div class="form-container score-form-container">
                <div class="form-header">
                    {% if form.instance.pk %}
                        <h2><i class="fas fa-user-edit"></i> 修改成绩信息</h2>
                        <p>更新学生的成绩记录</p>
                    {% else %}
                        <h2><i class="fas fa-plus-square"></i> 新增成绩记录</h2>
                        <p>为学生添加新的成绩信息</p>
                    {% endif %}
                </div>

                <form method="post" class="score-form">
                    {% csrf_token %}
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="{{ form.student.id_for_label }}">
                                <i class="fas fa-user-graduate"></i> 学生姓名：
                            </label>
                            {{ form.student }}
                            {% if form.student.errors %}
                            <div class="error-message">{{ form.student.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="form-group">
                            <label for="{{ form.grade.id_for_label }}">
                                <i class="fas fa-users"></i> 班级：
                            </label>
                            {{ form.grade }}
                            {% if form.grade.errors %}
                            <div class="error-message">{{ form.grade.errors }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="{{ form.subject.id_for_label }}">
                                <i class="fas fa-book"></i> 科目：
                            </label>
                            {{ form.subject }}
                            {% if form.subject.errors %}
                            <div class="error-message">{{ form.subject.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="form-group">
                            <label for="{{ form.term.id_for_label }}">
                                <i class="fas fa-calendar-alt"></i> 学期：
                            </label>
                            {{ form.term }}
                            {% if form.term.errors %}
                            <div class="error-message">{{ form.term.errors }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="form-group score-input-group">
                        <label for="{{ form.score.id_for_label }}">
                            <i class="fas fa-star"></i> 成绩分数：
                        </label>
                        <div class="score-input-wrapper">
                            {{ form.score }}
                            <span class="score-hint">分数范围：0-100分</span>
                        </div>
                        {% if form.score.errors %}
                        <div class="error-message">{{ form.score.errors }}</div>
                        {% endif %}
                        <div class="score-preview" id="scorePreview">
                            <span class="preview-label">成绩等级：</span>
                            <span class="preview-level" id="scoreLevel">--</span>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn-primary">
                            <i class="fas fa-save"></i> 
                            {% if form.instance.pk %}保存修改{% else %}添加成绩{% endif %}
                        </button>
                        <a href="{% url 'scores:score_list' %}" class="btn-secondary">
                            <i class="fas fa-times"></i> 取消
                        </a>
                    </div>
                </form>
            </div>

        </main>
    </div>

    <script>
        // 成绩输入实时预览
        document.addEventListener('DOMContentLoaded', function() {
            const scoreInput = document.querySelector('input[name="score"]');
            const scoreLevel = document.getElementById('scoreLevel');
            
            function updateScoreLevel() {
                const score = parseFloat(scoreInput.value);
                if (isNaN(score) || score < 0 || score > 100) {
                    scoreLevel.textContent = '请输入有效分数';
                    scoreLevel.className = 'preview-level invalid';
                } else if (score >= 90) {
                    scoreLevel.textContent = '优秀 🌟';
                    scoreLevel.className = 'preview-level excellent';
                } else if (score >= 80) {
                    scoreLevel.textContent = '良好 👍';
                    scoreLevel.className = 'preview-level good';
                } else if (score >= 70) {
                    scoreLevel.textContent = '中等 ✨';
                    scoreLevel.className = 'preview-level average';
                } else if (score >= 60) {
                    scoreLevel.textContent = '及格 👌';
                    scoreLevel.className = 'preview-level pass';
                } else {
                    scoreLevel.textContent = '不及格 ⚠️';
                    scoreLevel.className = 'preview-level fail';
                }
            }
            
            if (scoreInput) {
                scoreInput.addEventListener('input', updateScoreLevel);
                // 初始化显示
                updateScoreLevel();
            }
        });
    </script>
</body>
</html>